<template>
    <div class="person">
    长:6<input type="text" v-model="firstName"> <br>
    宽:3<input type="text" v-model="lastName"> <br>
    矩形面积:18<span>{{fullName}}</span> <br>
   
    <button @click="changeFullName">全名改为:li-si</button>
    </div>
    </template>
    <script setup lang="ts" name="App">
    import {ref,computed} from 'vue'
    let firstName = ref('3')
    let lastName = ref('6')
    // 计算属性——只读取，不修改
    /* let fullName = computed(()=>{
    return firstName.value + '-' + lastName.value
    }) */
    // 计算属性——既读取又修改
    let fullName = computed({
    // 读取
    get(){
    return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){
    console.log('有人修改了fullName',val)
    firstName.value = val.split('-')[0]
    lastName.value = val.split('-')[1]
    }
    })
    function changeFullName(){
    fullName.value = 'li-si'
    }
    </script>